import { ReactNode } from 'react'
import classNames from 'classnames'
import { Avatar } from 'antd'
import Icon from '@ant-design/icons'

import { useGlobalState } from '@/globalStore/globalStore'
import { addAvatarOSSParams } from '@/utils/utils'
import { Texty } from '../Texty'
import AvatarIcon from '@/assets/icons/avatar.svg?react'
import styles from './styles.module.less'

/** 页面头 */
export const PageHeader = ({ left, className }: { left?: ReactNode; className?: string }) => {
  const userName = useGlobalState(({ userInfo: v }) => v?.name || v?.englishName || '--')
  const userAvatar = useGlobalState(({ userInfo: v }) => addAvatarOSSParams(v?.avatar))

  return (
    <div className={classNames(styles.box, className)}>
      {!!left && <div className={styles.left}>{left}</div>}
      <div className={styles.right}>
        <div className={styles.user}>
          <Avatar className={styles.user_avatar} src={userAvatar || <Icon component={AvatarIcon} />} />
          <Texty mouseLeaveDelay={0} className={styles.user_name}>
            {userName}
          </Texty>
        </div>
      </div>
    </div>
  )
}
